<template>
  <div class="questionnaire-ques-box">
    <form class="question-list">
      <div v-for="(question , indexs) in substanceList" class="question-item" :key="indexs">
        <div class="title">
          {{indexs}}，{{ question.text }}
        </div>
        <div class="question-option">

          <!-- 根据题目类型选择渲染方式 -->
          <template v-if="question.type === 'single'">
            <tm-radio-group @change="onaNniu(question.cont,index)" v-model="question.cont[0]"
                            direction="customCol">
              <tm-radio outlined v-for="(item , index) in question.options" @change="selected(indexs,item.selected)" :value="item.value"
                        :key="index" :label="item.title">
              </tm-radio>
              <div v-if="question.display"  style="width: 80%; " >
                <tm-input v-model="question.cont"></tm-input>
              </div>
<!--              {{question.cont}}-->
            </tm-radio-group>
          </template>
          <template v-else-if="question.type === 'multiple'">
            <tm-checkbox-group @change="onaNniu(question.cont,index)" v-model="question.cont"
                               direction="customCol">
              <tm-checkbox :label="item.title" v-for="(item ) in question.options"
                           :value="item.value"></tm-checkbox>
            </tm-checkbox-group>

          </template>
        </div>
      </div>
      <button class="next-btn" @click="onNextStep">下载APP</button>
    </form>
    <tm-message ref="msg" :lines="2"></tm-message>
  </div>
</template>

<script setup lang="ts">
import tmRadio from '@/tmui/components/tm-radio/tm-radio.vue'
import tmRadioGroup from '@/tmui/components/tm-radio-group/tm-radio-group.vue'
import tmCheckboxGroup from '@/tmui/components/tm-checkbox-group/tm-checkbox-group.vue'
import tmCheckbox from '@/tmui/components/tm-checkbox/tm-checkbox.vue'
import tmMessage from '@/tmui/components/tm-message/tm-message.vue'
import {reactive, ref} from 'vue';
import {addSubstance} from '@/apis'

const msg = ref<InstanceType<typeof tmMessage> | null>(null)
const record = ref<InstanceType<typeof tmMessage> | null>(null)

// 构建所有题目和值
// interface Question {
//   text: string;
//   display: boolean;
//   type: 'single' | 'multiple'; // 单选或多选
//   options: object[];
//   cont: object[];
// }

const substanceList = reactive([
  {
    text: '您的家庭每月猪肉、鸡蛋消费金额大约是多少？',
    type: 'single',
    display:false,
    options: [{title: '500元内', value: '500元内', selected: false},
      {title: '500元-1000元', value: '500元-1000元', selected: false},
      {title: '1000元-5000元', value: '1000元-5000元', selected: false},
      {title: '5000元以上', value: '5000元以上', selected: false}],
    cont: [],


  },
  {

    text: '您倾向于购买哪种猪肉？',
    type: 'single',
    display:false,
    options: [{title: '正常市场价', value: '正常市场价', selected: false},
      {title: '略高于市场价的品种猪肉，如黑猪肉', value: '略高于市场价的品种猪肉，如黑猪肉', selected: false},
      {title: '高档型，如有机品牌猪肉', value: '高档型，如有机品牌猪肉', selected: false},
      {title: '不确定', value: '不确定', selected: false}]
    ,
    cont: []
  },
  {

    text: '您倾向于购买哪种产地的猪肉？',
    type: 'single',
    display:false,
    options: [{title: '本地农户新鲜猪肉', value: '本地农户新鲜猪肉', selected: false},
      {title: '大型牧场养殖猪肉', value: '大型牧场养殖猪肉', selected: false},
      {title: '进口猪肉', value: '进口猪肉', selected: false},
      {title: '不确定', value: '不确定', selected: false}]
    ,
    cont: []
  },
  {

    text: '您对于猪肉的出厂加工方式有何偏好？',
    type: 'single',
    display:false,
    options: [{title: '新鲜肉', value: '新鲜肉', selected: false},
      {title: '冷冻肉', value: '冷冻肉', selected: false},
      {title: '加工肉制品（如火腿、腊肉等）', value: '加工肉制品（如火腿、腊肉等）', selected: false},
      {title: '不确定', value: '不确定', selected: false}]
    ,
    cont: []
  },
  {

    text: '您会在外面购买肉馅的包子吗？',
    type: 'single',
    display:false,
    options: [{title: '会，方便快捷', value: '会，方便快捷', selected: false},
      {title: '不会，对肉馅不放心', value: '不会，对肉馅不放心', selected: false}]
    ,
    cont: []
  },
  {

    text: '您比较在意包子的哪些方面？（多选）',
    type: 'multiple',
    display:false,
    options: [{title: '包子的口感', value: '包子的口感', selected: false},
      {title: '肉馅的安全性', value: '肉馅的安全性', selected: false},
      {title: '是否是手工包', value: '是否是手工包', selected: false},
      {title: '购买渠道是否方便', value: '购买渠道是否方便', selected: false},
      {title: '价格', value: '价格', selected: false}]
    ,
    cont: []
  },
  {

    text: '您更倾向于一次购买多少猪肉？',
    type: 'single',
    display:false,
    options: [{title: '小份装0.5KG-1KG', value: '小份装0.5KG-1KG', selected: false},
      {title: '大份装1KG-5KG', value: '大份装1KG-5KG', selected: false},
      {title: '家庭实惠装＞5KG', value: '家庭实惠装＞5KG', selected: false},
      {title: '不确定', value: '不确定', selected: false}]
    ,
    cont: []
  },
  {

    text: '您对现在市场的猪肉有何担忧？（多选）',
    type: 'multiple',
    display:false,
    options: [
        {title: '担心肉质不好，来源于死猪肉、劣质猪等', value: '担心肉质不好，来源于死猪肉、劣质猪等', selected: false},
      {title: '担心肉不安全，有激素、细菌、寄生虫等', value: '担心肉不安全，有激素、细菌、寄生虫等', selected: false},
      {title: '担心缺斤少两，注水猪肉等', value: '担心缺斤少两，注水猪肉等', selected: false}]
    ,
    cont: []
  },
  {

    text: '您对于猪肉的生产过程有何期待？',
    type: 'single',
    display:false,
    options: [{title: '注重食品安全，无菌环境生产', value: '注重食品安全，无菌环境生产', selected: false},
      {title: '重视有机和天然养殖，无激素喂养', value: '重视有机和天然养殖，无激素喂养', selected: false},
      {title: '能了解并监控整个生产过程', value: '能了解并监控整个生产过程', selected: false},
      {title: '不太关注', value: '不太关注', selected: false},
    ]
    ,
    cont: []
  },
  {

    text: '您是否愿意支付更高的价格购买符合动物福利标准的猪肉？',
    type: 'single',
    display:false,
    options: [{title: '能了解并监控整个生产过程', value: '能了解并监控整个生产过程', selected: false},
      {title: '是', value: '是', selected: false},
      {title: '否', value: '否', selected: false},
      {title: '取决于价格差异', value: '取决于价格差异', selected: false},
      {title: '不确定', value: '不确定', selected: false},
    ]
    ,
    cont: []
  },
  {

    text: '您是否愿意尝试云端养殖？',
    type: 'single',
    display:false,
    options: [{title: '愿意尝试新的养殖方法', value: '愿意尝试新的养殖方法', selected: false},
      {title: '观望中，等模式成熟再尝试', value: '观望中，等模式成熟再尝试', selected: false},
      {title: '不太愿意', value: '不太愿意', selected: false}]
    ,
    cont: []
  },
  {
    display:false,
    text: '乌豚邦的整个模式是怎么样的呢？', type: 'single', options: [
      {title: '用户认养猪苗，乌豚邦帮助客户饲养小猪，在乌豚邦的牧场进行待寄养。', value: '用户认养猪苗，乌豚邦帮助客户饲养小猪，在乌豚邦的牧场进行待寄养。', selected: false},
      {title: '不清楚', value: '不清楚', selected: false}]
    ,
    cont: []
  },
  {

    text: '乌豚邦能给您带来什么？',
    type: 'single',
    display:false,
    options: [{
      title: '我们致力于创建一种全新的虚拟现实和有机生态养殖融合的模式。以古法牧养、不用现代科技速成、注重绿色健康为核心理念，为您打造一个完全属于自己的私人生态农场。',
      value: '我们致力于创建一种全新的虚拟现实和有机生态养殖融合的模式。以古法牧养、不用现代科技速成、注重绿色健康为核心理念，为您打造一个完全属于自己的私人生态农场。',
      selected: false
    },
      {title: '虚拟网络行业', value: '虚拟网络行业', selected: false}]
    ,
    cont: []
  },
]);
const answers: (string | object[])[] = Array.from({length: substanceList.length}, () => []);

//单选框放入第一个 ， 多选框push
const form = reactive({
  title: '',
  content: []
})
const submitSurvey = () => {
  console.log('Survey submitted:', answers);
}

const onSurvey = (question, index, i) => {

  // form.title = question.text
  console.log('Survey question:', question);
  console.log('Survey question:', index);
  console.log('Survey question:', i);
}

const onaNniu = (value, index) => {

  // console.log("onaNniuonaNniu");
  console.log(substanceList);
  // console.log(index);
}

const onNextStep = async () => {
  let id = getUrlSearch("id")
  msg.value.show({text: '成功', model: 'success'})
  const data = await addSubstance(id, {'substanceList': substanceList});
  console.log(data);
  if (data.code === 0) {
    uni.navigateTo({url:"/pages/index/index?inviteMode=B2C&inviteCode="+data.data})
  } else {
    msg.value.show({text: data.message, model: 'error'})
  }
}

const selected = (indexs,isDisplay) => {
  // msg.value.show({text: "选中的是"+indexs+"层的"+isDisplay, model: 'success'})
  if (isDisplay){
    substanceList[indexs].display = true;
  }else {
    substanceList[indexs].display = false;
  }
}


// 采用正则表达式获取地址栏参数
const getUrlSearch = (name) => {
  // 未传参，返回空
  if (!name) return null;
  // 查询参数：先通过search取值，如果取不到就通过hash来取
  var after = window.location.search;
  after = after.substr(1) || window.location.hash.split('?')[1];
  // 地址栏URL没有查询参数，返回空
  if (!after) return null;
  // 如果查询参数中没有"name"，返回空
  if (after.indexOf(name) === -1) return null;
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
  // 当地址栏参数存在中文时，需要解码，不然会乱码
  var r = decodeURI(after).match(reg);
  // 如果url中"name"没有值，返回空
  if (!r) return null;
  return r[2];
}
</script>

<style lang="scss" scoped>
.questionnaire-ques-box {
  width: 100%;
  box-sizing: border-box;
  padding: 30px 20px 0px 20px;

  .question-list {
    width: 100%;

    //下一步按钮
    .next-btn {
      position: relative;
      width: 336px;
      height: 48px;
      line-height: 48px;
      background: #F9700D;
      box-shadow: inset 0px -10px 7px 0px rgba(255, 153, 0, 0.5), inset 0px 0px 1px 0px rgba(255, 255, 255, 0.58);
      border-radius: 24px;
      font-weight: 600;
      font-size: 16px;
      color: #FFFFFF;
      bottom: 20px;
    }

    .question-item:not(:last-child) {
      margin-bottom: 40px;
    }

    .question-item {
      width: 100%;

      .title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        color: #333333;
        line-height: 22px;
        text-align: left;
        font-style: normal;
      }

      .question-option {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        line-height: 20px;
        text-align: left;
        font-style: normal;

        .option-item {
          display: flex;
          margin-top: 16px;
        }
      }
    }
  }
}
</style>